<!-- 
Copyright (C) 2019 NRIET
Description: 监控
-->
<link rel="stylesheet" href="/business/jcyb/monitor/css/monitor.css" />
<div class="modal-header">
    <div class="close">×</div>
    <div class="modal-title" id="modal-title">
        <span class="active">预警产品监控</span>
        <span class="facilities-tab">预警设施监控</span>
        <span class="bid-tab">叫应监控</span>
        <span class="process-tab">流程监控</span>
        <span class="othern-tab">其他监控</span>
        <span class="weatherman-tab">信息员监控</span>
        <span class="threejk-tab">三级防御监控</span>
    </div>
</div>
<ul class="monitor-main">
    <li>
        <div class="monitor-content ">
            <div class="monitor-top">
                <div class="condition-item">
                    <label>开始时间：</label>
                    <div class="monitor-starttime">
                        <div id="startMonitorTime"></div>
                    </div>
                </div>
                <div class="condition-item">
                    <label>结束时间：</label>
                    <div class="monitor-endtime">
                        <div id="endMonitorTime"></div>
                    </div>
                </div>
                <div class="condition-item">
                    <label>产品类型：</label>
                    <select id="productType">
                        <option value="yjxh">预警信号</option>
                        <option value="fxyj">风险预警</option>
                        <option value="jcfw">决策服务</option>
                    </select>
                </div>
                <div class="condition-item">
                    <label>发布手段：</label>
                    <select id="publishMeans">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="condition-item">
                    <label>单位：</label>
                    <select id="productUnitSelect">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="condition-item">
                    <div class="submit">查询</div>
                </div>
            </div>
            <div style="display:flex">
                <div class="condition-item">
                    <label>产品总数：</label>
                    <span class="productTotal"></span>
                </div>
                <div class="condition-item">
                    <label>发布总数：</label>
                    <span class="publishTotal"></span>
                </div>
                <div class="condition-item">
                    <label>成功率：</label>
                    <span class="successRate"></span>
                </div>
                <div class="condition-item">
                    <label>及时率：</label>
                    <span class="timelyRate"></span>
                </div>
            </div>
            <div class="monitor-table">
                <div class="alarm-header">
                    <div style="width: 5%">序号</div>
                    <div style="width: 10.55555%">产品类型</div>
                    <div style="width: 10.55555%">产品名称</div>
                    <div style="width: 10.55555%">制作时间</div>
                    <div style="width: 10.55555%">制作人</div>
                    <div style="width: 10.55555%">签发人</div>
                    <div style="width: 10.55555%">发布时间</div>
                    <div style="width: 10.55555%">发布手段</div>
                    <div style="width: 10.55555%">发布详情</div>
                    <div style="width: 10.55555%">成功率</div>
                </div>
                <div class="alarm-body">
                </div>
            </div>
        </div>
    </li>
    <li>
        <div class="facilities-table">
            <div style="display:flex">
                <div class="condition-item">
                    <label>类型选择：</label>
                    <select name="" id="facilitiesProduct">
                        <option value="0,1">全部</option>
                        <option value="0">大喇叭</option>
                        <option value="1">电子屏</option>
                    </select>
                </div>
                <div class="condition-item">
                    <button id="facilitiesQuery">查询</button>
                </div>
            </div>
            <div class="facilities-top">
                <div class="condition-item">
                    <label>设备总数：</label>
                    <span class="deviceTotal"></span>
                </div>
                <div class="condition-item">
                    <label>在线数：</label>
                    <span class="onlineNumber"></span>
                </div>
                <div class="condition-item">
                    <label>在线率：</label>
                    <span class="onlineRate"></span>
                </div>
            </div>
            <div class="facilities-head">
                <div style="width: 10%">序号</div>
                <div style="width: 15%">设施类型</div>
                <div style="width: 15%">设施编号</div>
                <div style="width: 15%">经度</div>
                <div style="width: 15%">纬度</div>
                <div style="width: 15%">状态</div>
                <div style="width: 15%">最新反馈时间</div>
            </div>
            <div class="facilities-body">
            </div>
        </div>
    </li>
    <li>
        <div class="bid-monitor">
            <div class="bid-top">
                <div class="condition-item">
                    <label>开始时间：</label>
                    <div class="bidmonitor-starttime">
                        <div id="startMonitorTime3"></div>
                    </div>
                </div>
                <div class="condition-item">
                    <label>结束时间：</label>
                    <div class="bidmonitor-endtime">
                        <div id="endMonitorTime3"></div>
                    </div>
                </div>
                <div class="condition-item">
                    <label>状态类型：</label>
                    <select id="statusType">
                        <option value="">全部</option>
                        <option value="1">成功</option>
                        <option value="0">失败</option>
                    </select>
                </div>
                <div class="condition-item">
                    <label>单位：</label>
                    <select id="unitSelect">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="condition-item">
                    <button id="bidQueryBtn">查询</button>
                    <button id="bidAddBtn">新增</button>
                </div>
            </div>
            <div class="bid-statistics">
                <div class="condition-item">
                    <label>事件总数：</label>
                    <span id="eventTotal">0</span>
                </div>
                <div class="condition-item">
                    <label>叫应总数：</label>
                    <span id="bindTotal">0</span>
                </div>
                <div class="condition-item">
                    <label>成功数：</label>
                    <span id="bindsuccess">0</span>
                </div>
                <div class="condition-item">
                    <label>成功率：</label>
                    <span id="successRate">0%</span>
                </div>
            </div>
            <div class="bid-monitor-table">
                <div class="bid-monitor-head">
                    <div style="width: 5%">序号</div>
                    <div style="width: 22%">详情</div>
                    <div style="width: 12%">拨打个数</div>
                    <div style="width: 22%">叫应人</div>
                    <div style="width: 19%">叫应单位</div>
                    <div style="width: 10%">成功率</div>
                    <div style="width: 10%">操作</div>
                </div>
                <div class="bid-monitor-body">
                </div>
            </div>
        </div>
    </li>
    <li>
        <div class="process-monitor">
            <div class="process-monitor-top">
                <div class="condition-item">
                    <label>事件名称：</label>
                    <select id="processEventType">
                    </select>
                </div>
                <div class="condition-item" style="display:none">
                    <label>单位：</label>
                    <select id="processUnit">
                        <option value="all">全部</option>
                    </select>
                </div>
                <div class="condition-item">
                    <label>开始时间：</label>
                    <span class="processStartTime"></span>
                </div>
                <div class="condition-item">
                    <label>结束时间：</label>
                    <span class="processEndTime"></span>
                </div>
                <div class="condition-item">
                    <button id="processQueryBtn">查 询</button>
                    <button id="processAddBtn">新 增</button>
                    <button id="processDownloadBtn">下 载</button>
                </div>
            </div>
            <div class="process-monitor-content">
                <div class="content-left">
                    <div class="timeline-left"></div>
                    <div class="content-left-main">
                        <div>预警信号</div>
                        <div>决策服务</div>
                        <div>风险预警</div>
                        <div>其他</div>
                    </div>
                </div>
                <div class="content-right">
                    <ul class="timelist">
                    </ul>
                    <ul class="content-right-main">
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li>
        <div class="other-monitor">
            <div class="other-monitor-top">
                <div class="condition-item">
                    <label>开始时间：</label>
                    <div class="othermonitor-starttime">
                        <div id="startMonitorTime2"></div>
                    </div>
                </div>
                <div class="condition-item">
                    <label>结束时间：</label>
                    <div class="othermonitor-endtime">
                        <div id="endMonitorTime2"></div>
                    </div>
                </div>
                <div class="condition-item">
                    <label>事件类型：</label>
                    <select id="eventType">
                        <option value="">全部</option>
                        <option value="">会议部署</option>
                        <option value="">文件部署</option>
                        <option value="">会商分析</option>
                        <option value="">应急联动</option>
                        <option value="">新闻发布</option>
                        <option value="">领导批示</option>
                        <option value="">服务总结</option>
                        <option value="">其他</option>
                    </select>
                </div>
                <div class="condition-item">
                    <label>单位：</label>
                    <select id="otherUnit">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="condition-item">
                    <button id="queryBtn">查 询</button>
                    <button id="addBtn">新 增</button>
                </div>
            </div>
            <div class="total-information">
                <label>信息总数：</label>
                <span>0</span>
            </div>
            <div class="other-monitor-table">
                <div class="other-monitor-head">
                    <div style="width: 5%">序号</div>
                    <div style="width: 11.5%">时间</div>
                    <div style="width: 8.5%">事件类型</div>
                    <div style="width: 11.5%">相关灾害</div>
                    <div style="width: 11.5%">事件简述</div>
                    <div style="width: 11.5%">附件</div>
                    <div style="width: 11.5%">上传人</div>
                    <div style="width: 11.5%">上传单位</div>
                    <div style="width: 11.5%">上传时间</div>
                    <div style="width: 6%">操作</div>
                </div>
                <div class="other-monitor-body">
                </div>
            </div>
            <iframe src="" id="fileName" style="display:none"></iframe>
        </div>
    </li>
    <li>
        <div class="weatherman-monitor">
            <div class="weatherman-monitor-top">
                <div class="condition-item">
                    <label>区县：</label>
                    <select id="areaSelect">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="condition-item">
                    <label>镇/乡/街道：</label>
                    <select id="townSelect">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="condition-item">
                    <label>村/居委会：</label>
                    <select id="villageSelect">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="condition-item">
                    <button id="weathermanQueryBtn">查 询</button>
                </div>
            </div>
            <div class="number">
                <label>人数：</label>
                <span>0</span>
            </div>
            <div class="weatherman-monitor-table">
                <div class="weatherman-monitor-head">
                    <div style="width: 8%">序号</div>
                    <div style="width: 11.5%">姓名</div>
                    <div style="width: 11.5%">电话</div>
                    <div style="width: 11.5%">区县</div>
                    <div style="width: 11.5%">镇/乡/街道</div>
                    <div style="width: 11.5%">村/居委会</div>
                    <div style="width: 11.5%">填报单位</div>
                    <div style="width: 11.5%">资料更新时间</div>
                    <div style="width: 11.5%">上传人</div>
                </div>
                <div class="weatherman-monitor-body">
                    <!-- <div class="weatherman-item">
                        <div style="width: 8%">序号</div>
                        <div style="width: 11.5%">姓名</div>
                        <div style="width: 11.5%">电话</div>
                        <div style="width: 11.5%">区县</div>
                        <div style="width: 11.5%">镇/乡/街道</div>
                        <div style="width: 11.5%">村/居委会</div>
                        <div style="width: 11.5%">填报单位</div>
                        <div style="width: 11.5%">资料更新时间</div>
                        <div style="width: 11.5%">上传人</div>
                    </div> -->
                </div>
            </div>
        </div>
    </li>
    <li>
        <div class="threejk-monitor">
            <div class="threejk-monitor-top">
                <div class="condition-item">
                    <label>开始时间：</label>
                    <div class="threejkmonitor-starttime">
                        <div id="startThreejkTime2"></div>
                    </div>
                </div>
                <div class="condition-item">
                    <label>结束时间：</label>
                    <div class="threejkmonitor-endtime">
                        <div id="endThreejkTime2"></div>
                    </div>
                </div>
                <div class="condition-item">
                    <button id="threejkQueryBtn">查 询</button>
                    <button id="downLoadBtn">下 载</button>
                </div>
            </div>
            <div class="threejk-monitor-table" id="threejkTable">
                <table>
                    <thead>
                        <tr>
                            <th style="width: 10%">序号</th>
                            <th style="width: 30%">时间</th>
                            <th style="width: 30%">防御级别</th>
                            <th style="width: 30%">报警类型</th>
                        </tr>
                    </thead>
                    <tbody>
                       
                       
                    </tbody>
                </table>
            </div>
        </div>
    </li>
</ul>

<script type="text/javascript" src="/business/jcyb/monitor/monitor.js"></script>
<script type="text/javascript" src="/business/jcyb/monitor/process-monitor.js"></script>